<template>
  <div
      class="fragment-item cursor-pointer relative-position"
      :class="{active:value===data.guid, checked: data.isChecked}"
      @click="handleClick"
      @dblclick="data.isRender = !data.isRender"
  >
    <template v-if="data.isRender">
      <div class="progress-wrap">
        <div class="progress-num" :style="{width: (data.progress || 0) + '%'}"></div>
      </div>

      <div class="clip-preview flex justify-between">
        <div class="clip-left relative-position">
          <div v-if="!data.fileUrl">{{ data.coverFrame || '无帧数' }}</div>
          <img v-else :src="data.fileUrl">
          <div v-if="data.disabled" class="mask-item flex flex-center">

            <div class="disabled-inner">
              <i class="iconfont iconweitongguo"></i>已禁用
            </div>
          </div>
        </div>
        <div class="clip-right">
          <div :title="`Clip ${clipIndex}`" class="text-overflow">Index {{ clipIndex }}</div>
          <div>
            <div class="time">{{ Math.round((data.end / clipData.fps) - (data.begin / clipData.fps)) }} 秒</div>
            <div class="time">{{ begin }}-{{ end }} 帧</div>
          </div>
        </div>
      </div>

    </template>
  </div>
</template>

<script>

export default {
  name: 'FragmentItem',
  props: {
    clipIndex: {
      type: Number,
      default: 0
    },
    value: {
      type: [String, Number],
      default: null
    },
    //数据参数，如帧，总时长，总帧数
    clipData: {
      type: Object,
      default: () => ({})
    },
    data: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      show: false,
      end: 0,
      begin: 0,
    }
  },
  watch: {
    data: {
      handler() {
        this.initData()
      },
      immediate: true
    }
  },
  methods: {
    inputChange(val) {
      return val.replace(/[^\d]/g, '')
    },
    initData() {
      const {begin, end} = this.data
      this.begin = Object.freeze(begin)
      this.end = Object.freeze(end)
    },
    changeframe(num, oldnum) {
      this.initData()
      if (!num) return
      this.$emit('changeframe', {num, oldnum})
    },
    handleClick(event) {
      if (event.ctrlKey) {
        this.data.isChecked = !this.data.isChecked
        return
      }
      this.$emit('input', this.value === this.data.guid ? null : this.data.guid)
      this.$emit('onItemClick', this.data)
    },
    checkItem() {
      // console.log('check', this.data)
      this.$emit('updateChecked', !this.isChecked)
      // this.data.isChecked = !this.data.isChecked
    }
  },
}
</script>

<style lang="scss" scoped>
.fragment-item {
  height: 92px;
  width: 230px;
  background: #202020;
  color: white;
  padding: 5px;
  font-size: 12px;
  position: relative;
  border: 1px solid #353535;
  box-sizing: border-box;
  margin-right: -1px;
  margin-bottom: -1px;
  user-select: none;

  &:before {
    position: absolute;
    content: "";
    pointer-events: none;
    top: 0;
    left: 0;
    right: -2px;
    bottom: -2px;
    border: 1px solid transparent;
    z-index: 10;
  }

  .checkbox-wrap {
    right: -2px;
    top: -2px;
    z-index: 10;
  }

  .progress-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    overflow: hidden;

    .progress-num {
      width: 0%;
      height: 3px;
      background: lightskyblue;
      //transition: all .5s;
    }
  }

  &.active {
    &:before {
      border-color: lightskyblue;
    }
  }

  &.checked {
    &:before {
      border-color: mediumpurple;
    }
  }

  .clip-preview {
    height: 100%;
  }

  .clip-left {
    flex: 1;
    background-size: cover;
    background: black;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: rgba(255, 255, 255, .15);
    font-weight: bold;
    height: 100%;

    img {
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
  }

  .clip-right {
    padding-left: 5px;
    height: 100%;
    width: 89px;
    flex-direction: column;

    .text-overflow {
      width: 100%;
    }
  }

  .time {
    font-size: 12px;
    color: lightskyblue;
  }

  .split {
    margin: 0 6px;

    &:last-child {
      margin-right: 0;
    }
  }

  .mask-item {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background: rgba(0, 0, 0, .5);
    display: flex;
    align-items: center;
    justify-content: center;

    .disabled-inner {
      height: 24px;
      background: green;
      border-radius: 12px;
      font-size: 12px;
      padding: 10px;
      display: flex;
      align-items: center;
      color: yellow;

      .iconfont {
        font-size: 14px;
        margin-right: 2px;
      }
    }
  }
}
</style>
